import { Style, Stroke, Fill, Icon } from 'ol/style';
import { Vector as VectorLayer,Image as imageLayers } from 'ol/layer';
import { Vector as VectorSource } from 'ol/source';
import {LineString,MultiLineString, Point} from 'ol/geom';
import Feature from 'ol/Feature';
import {getVideoDetail} from "../api/taifeng.js";
import { getVectorContext } from 'ol/render.js';
export default class fkyLine{
  constructor(options){
    this.map=options.map;
    this.init();
    this.pointPositions=[[[135.30,28.30],[155.90,39.10]]];
    this.pointFeature=[];
    //分割长度
    this.splitlength=0
  }
  async init(){
    const {data}= await getVideoDetail()
    let points = data.data[0].points;
    var length=points.length;
    var layers=new VectorLayer({
    style:	new Style({
    
              stroke: new Stroke({
                color: 'rgba(255, 0, 5, 0.8)',
                // lineDash: [10, 10],
                width: 2,
              }),
            })
          });
    var source=new VectorSource();
    let[starepos,endpos]=[
      [Number( points[0].lng), Number(points[0].lat) ],
     [Number( points[length-1].lng), Number( points[length-1].lat)]
    ]
    let featureLine = new Feature( new LineString([starepos,endpos])
    )
   //寻找中点
  
   let center=this.LineearInterpolation(starepos,endpos)
   center[0]+=10
 
//分段次数
let time=180;
//线的坐标点
let coords=[];

for(let i=0;i<=time;i++){
  let stapon=this.basizeSquareCalc(starepos,center,endpos,i/180)
  let endpon=this.basizeSquareCalc(starepos,center,endpos,(i+1)/180)
  coords.push([stapon,endpon])
}

let MuItinestring=new Feature(new MultiLineString(coords))
source.addFeature(MuItinestring)
 

//动态标会
let times=0;
let newCenter= center;
newCenter[0]-=20
let linecoords=[];
let lastendPos=starepos;
let arrowImage=new Image()
let arrLoad=false;
arrowImage.src='/image/logo.png';
arrowImage.onload=function(){
arrLoad=true
}

layers.on('postrender',(evt)=>{
  if(times>180){
    times=0;
    linecoords=[];
    lastendPos=starepos;
  }

this.pointPositions.forEach((item)=>{
  
})

let ctx=getVectorContext(evt)
  let curendpos=this.basizeSquareCalc(starepos,newCenter,endpos,times/180)
  
 linecoords.push([lastendPos,curendpos])
//曲线
this.curvelinedraw(ctx,linecoords,starepos,endpos)
//箭头
this.arrowRender(ctx,curendpos,arrLoad,arrowImage)

 lastendPos=curendpos
 layers.changed()
  times++
})
    

    source.addFeature(featureLine);
    source.addFeatures(this.pointFeature)
    layers.setSource(source);
    this.map.addLayer(layers)




  }
 genertePointsFeature(){
  for(let i =0,ii=this.pointPositions.length;i<ii;i++){
 this.pointFeature.push(new Feature(new Point(this.pointPositions[i][0])),new Feature(new Point(this.pointPositions[i][1])))
  }
 }

  //线性插值计算公式 （1-t)*statarPos+endPos(t)

  //常数乘以二维数组向量
  constMul(constant,Vector2){
    return [constant*Vector2[0] , constant*Vector2[1]]
  }
  LineearInterpolation(starepos,endPos){
    let a=this.constMul(0.5,starepos);
    let b=this.constMul(0.5,endPos)
    return this.vectoeAdd(a,b)
  }
    //计算向量加法

    vectoeAdd(a,b){
      return[a[0]+b[0],a[1]+b[1]]
    }

  basizeSquareCalc(starepos,center,endPos,t)
  {
    let a=this.constMul(Math.pow((1-t),2),starepos)
    let b=this.constMul(2*t*(1-t),center)
    let c=this.constMul(Math.pow(t,2),endPos)
    return this.vectoeAdd(this.vectoeAdd(a,b),c)
  }

  //动态绘制曲线
  curvelinedraw(ctx,linecoords,starepos,endpos){
    let geomety=new MultiLineString (linecoords)
    let startGrdPixePos=this.map.getPixelFromCoordinate(starepos);
    let ebdGrdPixePos=this.map.getPixelFromCoordinate(endpos);
     let xDiff=ebdGrdPixePos[0]-startGrdPixePos[0];
     let Ydiff=ebdGrdPixePos[1]-startGrdPixePos[1];
   
     let radius=Math.pow(Math.pow(xDiff,2)+Math.pow(Ydiff,2),0.5)
    var grd=ctx.context_.createRadialGradient(startGrdPixePos[0],startGrdPixePos[1],0,startGrdPixePos[0],startGrdPixePos[1],radius);
    grd.addColorStop(0,'yellow')
    grd.addColorStop(0.2,'red')
    grd.addColorStop(0.4,'pink')
    grd.addColorStop(0.6,'green')
    grd.addColorStop(0.8,'orange')
    grd.addColorStop(1,'blue')
    ctx.setStyle(new Style({
      stroke:new Stroke({
          color:grd,
          width: 6,
      })
    }))

    ctx.drawGeometry(geomety)
  }
  //箭头的渲染
  /**
   * 
   * @param {*} ctx  绘制上下文
   * @param {*} curendpos 
   * @param {*} arrLoad 
   * @param {*} arrowImage 
   */
  arrowRender(ctx,curendpos,arrLoad,arrowImage){
    let arrowGemety=new Point(curendpos)
    if(arrLoad){
      ctx.setImageStyle(new Icon({
        img:arrowImage,
        imgSize:[26,26]
      }))
    }
     ctx.drawGeometry(arrowGemety)
  }
}